const path = require('path') // 得到的path为webpack.config.js所在的目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 生成一个 HTML5 文件， 在 body 中引入生成的静态资源
const { DefinePlugin } = require('webpack'); // DefinePlugin是webpack内置插件
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const {version} = require('./package')

module.exports={
    mode: 'development', // development  开发模式  production 生产模式
    devtool: false,
    entry: {
        // 指定入口文件,支持多入口
        main: './src/index.js'  // main 可自定义用来做输出文件名
    },
    output: {
        // 输出文件名
        filename: "[name].js",
        // 输出路径
        // __dirname nodejs的变量，代表当前文件的目录绝对路径
        path: path.resolve(__dirname,'./dist'),
        // 文件路径前缀
        publicPath: "./"
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src/')
        }
    },
    devServer: {
        port: 3000,
        open: true
    },
    // loader配置
    module: {
        rules: [
            // 详细loader配置
            // 不同文件必须配置不同loader
            {
                // 匹配css文件
                test: /\.css$/,
                // 使用哪些loader文件进行处理
                // 注意: 编写顺序(从下往上, 从右往左, 从后往前)
                use: [
                    // use数组中loader执行顺序：从后往前
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    // importLoaders属性为了回头处理@import的css文件，写成对象
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,
                            esModule: false
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                //匹配less文件
                test: /\.less$/,
                use: [
                    'style-loader',
                    // @import的css文件，回头能被前面的"less-loader"、"postcss-loader"处理
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2,
                            esModule: false
                        }
                    },
                    // css 的转换和适配
                    'postcss-loader',
                    // 将less文件编译成css文件
                    // 需要下载less-loader 和 less
                    'less-loader',
                ]
            },
            {
                //匹配scss文件
                test: /\.scss$/,
                use: [
                    'style-loader',
                   // @import的css文件，回头能被前面的"sass-loader"、"postcss-loader"处理
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2
                        }
                    },
                    'postcss-loader',
                    // 将less文件编译成css文件
                    // 需要下载sass-loader 和 node-sass
                    'sass-loader',
                ]
            },
            // {
            //     test: /\.(png|jpe?g|gif|svg)$/,
            //     use: [
            //         {
            //             loader: 'url-loader',
            //             options: {
            //                 // 打包到img目录下，保留文件名、6位哈希、扩展名，连接符除了句点，还可以用-等
            //                 // 效果等同于outputpath，但是这种写法更常用
            //                 name: "img/[name].[hash:6].[ext]",
            //                 limit: 100 * 1024 // 100kb以下的图片
            //             }
            //         }
            //     ]
            // },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                // type: "asset/resource", file-loader的效果
                // type: "asset/inline", url-loader的效果
                type: "asset",
                generator: {
                    filename: "img/[name].[hash:4][ext]"
                },
                // 是parser，不是parse
                parser: {
                    dataUrlCondition: {
                        // 是maxSize，不再是limit
                        maxSize: 10 * 1024
                    }
                }
            },
            {
                test: /\.ttf|eot|woff2?$/i,
                type: "asset/resource",
                generator: {
                    filename: "font/[name].[hash:6][ext]"
                }
            },
            // ES6转ES5
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: 'babel-loader'
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: false,//不将注释提取到单独的文件中
            }),
        ],
    },
    // 配置plugins(其它配置不变)
    plugins: [
        new CleanWebpackPlugin(),
        // html-webpack-plugin
        // 功能 默认创建一个空的HTML，自动引入打包输出所有的资源（JS/CSS）
        // 需求：需要有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制 './src/index.html'文件，并自动引入打包输出的所有资源（JS/CSS）
            title: "Webpack Template",
            template: './public/index.html'
        }),
        // 设置index.html页面上 <%= BASE_URL %> 的路径值
        new DefinePlugin({
            // 要包裹两层引号
            BASE_URL: '"./"'
        }),
        // 直接复制原文件
        new CopyWebpackPlugin({
            patterns: [
                {
                    // to: xxx, // 不用写，默认会使用output.path
                    from: "public",
                    globOptions: {
                        ignore: [
                            "**/index.html",
                            "**/.DS_Store"
                        ]
                    }
                }
            ]
        }),
        // 添加版权信息
        new webpack.BannerPlugin({
            entryOnly: true,  // 是否仅在入口包中输出 banner 信息
            banner: () => {
                return `Version: v${version}`
                    + `\n`
                    + `Date: ${new Date().toLocaleString( )}`
            }
        })
    ],
}
